<template>
	<div class="diag">
		<el-dialog v-model="dialogFormVisible" title="跨表核验规则" @close="close">
			<el-switch v-model="switchValue" inactive-text="规则核验状态"></el-switch>
			<div class="checks">
				<div v-for="(it, index) of rules" :key="index" class="rule">
					<p>核验要求{{ index + 1 }}</p>
					选择规则
					<el-select v-model="it.ruleId" style="width: 300px" placeholder="请选择">
						<el-option v-for="item in ruleOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
					<el-icon v-if="index != 0" class="el-icon-remove-outline" @click="removeChecks(index)"><Remove /></el-icon>
					<el-icon v-if="index + 1 == rules.length" class="el-icon-circle-plus-outline" @click="addChecks"><CirclePlus /></el-icon>
					<div v-for="(i, idx) of it.tableList" :key="idx" class="table_select">
						选择表&nbsp;&nbsp;&nbsp;
						<el-select v-model="i.datasetTableId" placeholder="请选择" @change="getField">
							<el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
						&nbsp;&nbsp;&nbsp;表字段&nbsp;&nbsp;&nbsp;
						<el-select v-model="i.columns" multiple filterable placeholder="请选择">
							<el-option v-for="item in fieldOptions['id' + i.datasetTableId]" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
						<el-icon v-if="idx != 0" class="el-icon-remove-outline" @click="removeTable(index, idx)"><Remove /></el-icon>
						<el-icon v-if="idx + 1 == it.tableList.length" class="el-icon-circle-plus-outline" @click="addTable(index)"><CirclePlus /></el-icon>
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="close">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="CrossCheck">
import { getDataTableList, getTableFields, getTableRules, crossTableSave } from '@/api/data-qa-fe/index'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'

const emit = defineEmits(['close'])
const props = defineProps({
	diagShow: {
		type: Boolean,
		default: false
	},
	setId: {
		type: Number,
		default: () => 1
	},
	checkStatus: {
		type: String,
		default: () => ''
	},
	versionId: {
		type: String,
		default: () => ''
	}
})
const dialogFormVisible = ref(false)
const switchValue = ref(false)
const ruleOptions = ref([])
const fieldOptions = ref({})
const tableOption = ref([])
const value = ref('')
const rules = ref([
	{
		ruleId: '',
		checkSql: '',
		tableList: [
			{
				datasetTableId: '',
				columns: []
			}
		]
	}
])
watch(
	() => props.diagShow,
	(newVal, oldVale) => {
		dialogFormVisible.value = newVal
	}
)
watch(
	() => props.setId,
	(newVal, oldVale) => {
		init()
	}
)
watch(
	() => props.checkStatus,
	(newVal, oldVale) => {
		switchValue.value = newVal == '0' ? true : false
	}
)
onMounted(() => {
	init()
})
const init = () => {
	let param = {
		datasetId: props.setId
	}
	getTableRules().then((res: any) => {
		if (res.code == 0) {
			ruleOptions.value = res.data
		}
	})
	getDataTableList(param).then((res: any) => {
		if (res.code == 0) {
			res.data.forEach(item => {
				item.value = item.id
				item.label = item.datasetTableName
			})
			tableOption.value = res.data
		}
	})
}
const getField = (val: any) => {
	let param = {
		id: val
	}
	getTableFields(param).then((res: any) => {
		if (res.code == 0) {
			res.data.forEach((item: any) => {
				item.value = item.datasetFieldId
				item.label = item.datasetFieldName
			})
			fieldOptions.value['id' + val] = res.data
		}
	})
}
const addChecks = () => {
	rules.value.push({
		ruleId: '',
		checkSql: '',
		tableList: [
			{
				datasetTableId: '',
				columns: []
			}
		]
	})
}
const addTable = (index: any) => {
	rules.value[index].tableList.push({ datasetTableId: '', columns: [] })
}
const removeChecks = (index: any) => {
	rules.value.splice(index, 1)
}
const removeTable = (index: any, idx: any) => {
	rules.value[index].tableList.splice(idx, 1)
}
const close = () => {
	dialogFormVisible.value = false
	emit('close', false)
}
const fieldCheck = (msg: string) => {
	ElMessage({
		message: msg,
		type: 'error'
	})
}
const confirm = () => {
	let newFiles: any[] = []
	let hasSpace = false
	const rulesData = JSON.parse(JSON.stringify(rules.value))
	rulesData.forEach(item => {
		// 规则名称回填
		if (item.ruleId != '' && ruleOptions.value.length > 0) {
			// item.checkSql = ruleOptions.value.filter(v => {
			// 	return v.value === item.ruleId
			// }).label
			ruleOptions.value.forEach((v: any) => {
				if (item.ruleId === v.value) {
					item.checkSql = v.label
				}
			})
		} else {
			fieldCheck('请选择规则!')
			hasSpace = true
			return
		}
		// 字段参数回填
		if (item.tableList.length > 0) {
			item.tableList.forEach((it: any) => {
				if (it.columns.length > 0) {
					const data = it.columns.map((i: any) => {
						return fieldOptions.value['id' + it.datasetTableId].filter((v: any) => {
							return v.datasetFieldId === i
						})[0]
					})
					it.columns = data
				} else {
					fieldCheck('请选择字段!')
					hasSpace = true
					return
				}
			})
		} else {
			fieldCheck('请选择表!')
			hasSpace = true
			return
		}
	})
	if (!hasSpace) {
		let param = {
			hyList: rulesData,
			versionId: props.versionId,
			invalidFlag: switchValue.value ? '0' : '1'
		}
		crossTableSave(param).then(res => {
			console.log('返回', res)
			if (res.code == 0) {
				ElMessage({
					type: 'success',
					message: '核验成功!'
				})
			} else {
				ElMessage({
					type: 'error',
					message: res.msg
				})
			}
			rules.value = [
				{
					ruleId: '',
					checkSql: '',
					tableList: [
						{
							datasetTableId: '',
							columns: []
						}
					]
				}
			]
			dialogFormVisible.value = false
			emit('close')
		})
	}
}
</script>
<style>
.el-switch__label span {
	color: #303133;
}
</style>
<style lang="scss" scoped>
.checks {
	max-height: 500px;
	overflow: auto;
}
.rule {
	p {
		margin: 20px 0;
	}
	.table_select {
		margin-top: 15px;
	}
}
.el-icon {
	margin-left: 8px;
}
</style>
